<template>
    <div>
        <div class="clearfix">
            <div class="detila-div-80">
                <div>
                    <div class="radius-container">
                        <div class="border-b pad-10 font-w font-15">基本信息</div>

                        <div class="pad-20">
                            <el-form :model="form" label-width="120px" :rules="rules" ref="form">
                                <el-form-item label="店铺名称" prop="enterpriseName">
                                    <el-col :span="10">
                                        <el-input v-model="form.enterpriseName" />
                                    </el-col>
                                </el-form-item>

                                <el-form-item  label="店铺logo" prop="enterpriseLogo">
                                    <el-upload class="avatar-uploader"
                                               action="/api/common/uploadFiles"
                                               accept="image/jpeg,image/gif,image/png,image/bmp"
                                               :before-upload="beforeUpload"
                                               name="files" :data="token"
                                               :show-file-list="false"
                                               :on-success="handleUploadSuccess">
                                        <img v-if="form.enterpriseLogo"
                                             :src="form.enterpriseLogo" height="200px">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>

                                <el-form-item label="店铺主营" prop="mainCamp">
                                    <el-col :span="10">
                                        <el-input v-model="form.mainCamp" />
                                    </el-col>
                                </el-form-item>

                                <el-form-item label="分销佣金" prop="minProfit">
                                    <el-col :span="5">
                                        <el-input v-model="form.minProfit" style="width: 300px" placeholder="最低收益">
                                          <template slot="append">%</template>
                                        </el-input>
                                    </el-col>
                                    <el-col :span="1">
                                      <span>~</span>
                                    </el-col>
                                    <el-col :span="5" class="margin-left-39">
                                        <el-input v-model="form.maxProfit" style="width: 300px" placeholder="请输入最高收益">
                                          <template slot="append">%</template>
                                        </el-input>
                                    </el-col>
                                </el-form-item>

                                <el-form-item label="微信号" prop="wechatNum">
                                  <el-col :span="10">
                                    <el-input v-model="form.wechatNum" />
                                  </el-col>
                                </el-form-item>

                                <!--<el-form-item label="企业名片管理员">-->
                                  <!--<el-col :span="10">-->
                                    <!--<el-select v-model="cardMemberId" placeholder="请选择">-->
                                      <!--<el-option-->
                                        <!--v-for="item in memberList"-->
                                        <!--:key="item.memberId"-->
                                        <!--:label="item.nickname"-->
                                        <!--:value="item.memberId">-->
                                      <!--</el-option>-->
                                    <!--</el-select>-->
                                  <!--</el-col>-->
                                <!--</el-form-item>-->
                            </el-form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="radius-container container-nonebg">
            <el-form label-width="80px">
                <el-button type="primary" @click="saveEnterprise">保存</el-button>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
  .margin-left-39 {
    margin-left: -39px;
  }
</style>

<script>
  import { getEnterprise, saveEnterprise, getMemberList } from '@/api/user/enterprise'
  import { getToken } from '@/utils/auth'

  export default {
    data() {
      return {
        form: {
          enterpriseId: this.getEnterpriseId(),
          enterpriseName: '',
          enterpriseLogo: '',
          mainCamp: '',
          minProfit: '',
          maxProfit: '',
          wechatNum: '',
          cardMemberId: ''
        },
        memberList: [],
        cardMemberId: '-1',
        rules: {
          enterpriseName: [
            { required: true, message: '店铺名称', trigger: 'blur' }
          ],
          minProfit: [
            { required: false, message: '最低收益', trigger: 'blur' },
            { pattern: /^100$|^(\d|[1-9]\d)$/, message: '只能输入大于等于0小于100的整数' }
          ],
          maxProfit: [
            { required: false, message: '最高收益', trigger: 'blur' },
            { pattern: /^100$|^(\d|[1-9]\d)$/, message: '只能输入大于等于0小于100的整数' }
          ],
          enterpriseLogo: [
            { required: true, message: '店铺Logo', trigger: 'blur' }
          ]
        },
        token: {}
      }
    },
    created() {
      this.initEnterprise()
      this.token = { accessToken: getToken() }
    },
    methods: {
      initEnterprise() {
        this.initMemberList()
        getEnterprise(this.getEnterpriseId()).then(response => {
          if (response.data != null) {
            this.form = response.data
            if (this.form.cardMemberId) {
              this.cardMemberId = this.form.cardMemberId
            }
          }
        })
      },
      initMemberList() {
        this.memberList = []
        getMemberList(this.getEnterpriseId()).then(response => {
          if (response.data != null) {
            this.memberList.push({ memberId: '-1', nickname: '请选择' })
            response.data.forEach(e => {
              this.memberList.push(e)
            })
          }
        })
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, file) {
        if (res.code === 101) {
          this.form.enterpriseLogo = res.data[0]
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      saveEnterprise() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.mainCamp.length > 4) {
              this.$message({
                message: '公司主营最多只能输入4个字',
                type: 'error'
              })
              return
            }
            if (this.form.minProfit > this.form.maxProfit) {
              this.$message({
                message: '最低收益不能大于最高收益',
                type: 'error'
              })
              return
            }
            // if (this.cardMemberId === '-1') {
            //   this.$message({
            //     message: '请选择企业名片管理员',
            //     type: 'error'
            //   })
            //   return
            // }
            this.form.cardMemberId = this.cardMemberId
            saveEnterprise(this.form).then(response => {
              if (response.isError) return
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.initEnterprise()
            })
          }
        })
      }
    }
  }
</script>
